<template>
  <div class="wrapper">
    <div class="header">
      <div class="header-item">
        <i class="el-icon-shopping-cart-1"></i>我的购物车
        <span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
      </div>
    </div>
    <div class="content-box">
      <!-- 没有数据 -->
      <div v-show="cartlist.length == 0" class="imgss">
        <img src="../assets/imgs/cart-empty.png" alt="" />
        <div class="right">
          <h2>您的购物车还是空的！</h2>
          <p>快去购物吧!</p>
        </div>
      </div>
      <div class="shop-wrapper" v-show="cartlist.length !== 0">
        <table>
          <tr style="height: 85px; width: 100%">
            <th><input type="checkbox" v-model="checkAll" /> 全选</th>
            <th></th>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
          </tr>
          <tr v-for="item in cartlist" :key="item.productID">
            <td>
              <input type="checkbox" v-model="item.check" />
            </td>
            <td>
              <img
                :src="'http://101.132.181.9:3000/' + item.productImg"
                @click="tiao(item.productID)"
              />
            </td>
            <td style="color: #424242" @click="tiao(item.productID)">
              {{ item.productName }}
            </td>
            <td style="color: #424242; font-size: 15px">{{ item.price }}元</td>
            <td>
              <el-input-number
                size="mini"
                v-model="item.num"
                @change="getnum(item.num, item.productID)"
                :min="1"
                :max="5"
              ></el-input-number>
            </td>
            <td style="color: #ff6700; font-size: 16px">
              {{ item.num * item.price }}元
            </td>
            <td>
              <el-popover placement="top" width="100">
                <p>您确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="getdelCart(item.productID)"
                    >确定</el-button
                  >
                </div>
                <i slot="reference" class="el-icon-error"></i>
              </el-popover>
            </td>
          </tr>
        </table>
      </div>
      <div class="footer" v-show="cartlist.length !== 0">
        <div class="footer-left">
          <span @click="$router.push('/goods')"> 继续购物</span>
          <div class="jishu">
            | 共 {{ checkNumS.allNum }} 件商品，已选择
            {{ checkNumS.checkNum }} 件
          </div>
        </div>
        <div class="footer-right">
          <p>
            合计:
            <span style="font-size: 25px">{{ checkNumS.checkPrice }}元</span>
          </p>
          <button
            :class="checkNumS.checkNum > 0 ? 'buttonch' : 'button'"
            :disabled="checkNumS.checkNum > 0 ? false : true"
            @click="addConOrder()"
          >
            去结算
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { delCart, CartAll, CartNum } from "@/api/shopcart";
export default {
  name: "shoppingCart",
  data() {
    return {
      flag: 1,
      // num: 1, //计数
      cartlist: [],
      userId: this.$store.state.users.user_id,
    };
  },
  created() {
    this.getCartList();
  },
  computed: {
    //全选 反选
    checkAll: {
      set(v) {
        console.log(v);
        return this.cartlist.forEach((item) => {
          return (item.check = v);
        });
      },
      get() {
        return this.cartlist.every((item) => {
          return item.check == true;
        });
      },
    },
    //总价
    checkNumS() {
      var allNum = 0;
      var checkNum = 0;
      var checkPrice = 0;
      this.cartlist.forEach((item) => {
        allNum += item.num;
        if (item.check == true) {
          checkNum += item.num;
          checkPrice += item.num * item.price;
        }
      });
      return { allNum, checkNum, checkPrice };
    },
  },
  methods: {
    /**
     * 修改购物车num
     */
    async getnum(num, pid) {
      const res = await CartNum({
        num: num,
        user_id: this.userId,
        product_id: pid,
      });
      console.log(res, "getnum");
      if (
        res.data.code == "001" ||
        res.data.code == "002" ||
        res.data.code == "003"
      ) {
        this.getCartList();
        this.$notify.success({
          title: "成功",
          message: res.data.msg,
          showClose: true,
        });
      }
    },
    /**
     * 跳转详情
     */
    tiao(type) {
      this.$router.push({
        path: "/goods/details", //跳转的路由
        query: {
          //跳转路由的参数
          type: type, 
        },
      });
    },
    /**
     * 添加购物车
     */
    addConOrder() {
      let obj = this.cartlist.filter((item) => {
        return item.check === true;
      });
      this.$store.commit("picss", obj);
      this.$router.push("/confirmOrder");
    },
    /**
     * 删除购物车
     */
    async getdelCart(pid) {
      const res = await delCart({
        user_id: this.userId,
        product_id: pid,
      });
      if (
        res.data.code == "001" ||
        res.data.code == "002" ||
        res.data.code == "003"
      ) {
        this.getCartList();
        this.$notify.success({
          title: "成功",
          message: res.data.msg,
          showClose: true,
        });
      }
    },
    /**
     * 获取数据
     */
    async getCartList() {
      const res = await CartAll({
        user_id: this.userId,
      });
      if (res.data.code === "001") {
        this.$notify.success({
          title: "成功",
          message: res.data.msg,
          showClose: true,
        });
        this.cartlist = res.data.shoppingCartData;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  font-size: 14px !important;
}
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  .header {
    height: 64px;
    width: 100%;
    background: white;
    border-bottom: 3px solid rgb(255, 103, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    .header-item {
      i {
        font-size: 40px !important;
        color: rgb(255, 103, 0);
      }
      span {
        color: #757575;
        font-size: 12px !important;
        height: 20px;
        line-height: 20px;
        margin-top: 30px;
      }
      width: 1225px;
      margin: 0 auto;
      height: 64px;
      line-height: 64px;
      font-size: 28px !important;
    }
  }
  .content-box {
    width: 1225px;
    // height: 100px;
    height: 100%;
    margin-top: 10px;
    // 空数据
    .imgss {
      display: flex;
      img {
        height: 300px;
        width: 360px;
      }
      .right {
        margin-left: 30px;
        color: #b0b0b0;
        h2 {
          margin: 70px 0 15px;
          font-weight: 600;
          font-size: 36px;
        }
        p {
          margin: 0 0 20px;
          font-size: 20px;
        }
      }
    }
    .shop-wrapper {
      background: white;
      table {
        width: 100%;
        height: 100%;
        background: white;
        display: flex;
        flex-direction: column;
        tr {
          width: 1225px;
          height: 85px;
          color: #424242;
          border-bottom: 1px solid #e0e0e0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          th,
          td {
            width: 25%;
            height: 85px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          img {
            height: 80px;
            width: 80px;
          }
        }
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    background: white;
    margin-top: 20px;
    margin-bottom: 20px;
    .footer-right {
      display: flex;
      align-items: center;
      p {
        color: #ff6700;
        font-size: 16px;
      }
      .button {
        width: 200px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 18px;
        margin-left: 50px;
        background: #e0e0e0;
        color: #b0b0b0;
        border: none;
      }
      .buttonch {
        border: none;
        background: #ff6700;
        color: white;
        width: 200px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 18px;
        margin-left: 50px;
      }
    }
    .footer-left {
      display: flex;
      .jishu {
        font-size: 18px;
        display: flex;
        align-items: center;
        margin-left: 32px;
        color: #757575;
      }
      span {
        line-height: 50px;
        margin-left: 32px;
        color: #757575;
        font-size: 18px;
      }
    }
  }
}
</style>
